<script setup lang="ts">
import { ref } from 'vue';
import type { HospitalLevelandReginArrInterface } from '../../services/modules/home/type';

interface Iprops {
  title: string;
  levelArr: HospitalLevelandReginArrInterface;
}
const props = defineProps<Iprops>();
// 自定义事件
const emit = defineEmits(['cateTabClickHandle']);
// 控制点击高亮
const currentVal = ref<string>('');
const changeTabHandle = (levelVal: string, parentId?: number) => {
  currentVal.value = levelVal;
  emit('cateTabClickHandle', levelVal, parentId);
};
</script>
<template>
  <div class="cate-tab">
    <div class="tabname">{{ props.title }} :</div>
    <ul class="tabnav">
      <li :class="{ selected: currentVal == '' }" @click="changeTabHandle('')">全部</li>
      <li
        v-for="item in props.levelArr"
        :key="item.id"
        @click="changeTabHandle(item.value, item.parentId)"
        :class="{ selected: currentVal == item.value }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<style scoped lang="scss">
.cate-tab {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 12px;
  .tabname {
    color: #999;
  }
  ul.tabnav {
    flex: 1;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 15px;
    li {
      margin-right: 15px;
      margin-bottom: 15px;
      cursor: pointer;
      &:hover {
        color: var(--primary-color);
      }
      &.selected {
        color: var(--primary-color);
        font-weight: 900;
      }
    }
  }
}
</style>
